<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号文章模版</title>
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333333;
            line-height: 1.6;
            padding: 20px 0;
        }
        
        .article-container {
            max-width: 677px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-radius: 8px;
        }
        
        /* 导读和互动话题共用样式 */
        .highlight-block {
            background-color: #f5f7fa;
            border-left: 4px solid #3490dc;
            padding: 20px;
            border-radius: 0 6px 6px 0;
        }
        
        .highlight-block p {
            margin-bottom: 16px;
            line-height: 1.8;
        }
        
        .highlight-block p:last-child {
            margin-bottom: 0;
        }
        
        /* 导读部分 */
        .introduction {
            margin-bottom: 32px;
        }
        
        /* 互动话题部分 */
        .interaction-topic {
            margin-top: 40px;
            margin-bottom: 20px;
        }
        
        .interaction-topic strong {
            color: #3490dc;
        }
        
        /* 文章封面图 */
        .article-cover {
            width: 100%;
            height: clamp(180px, 50vw, 380px);
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 32px;
        }
        
        .article-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .article-cover img:hover {
            transform: scale(1.05);
        }
        
        /* 文章正文 */
        .article-content {
            font-size: clamp(1rem, 3vw, 1.125rem);
            line-height: 1.8;
        }
        
        .article-content p {
            margin-bottom: 24px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        
        .article-content p:hover {
            transform: translateY(-2px);
        }
        
        .first-letter-drop:first-letter {
            initial-letter: 2;
            font-size: 2.5em;
            float: left;
            line-height: 0.8;
            margin-right: 0.1em;
            color: #3490dc;
        }
        
        /* 分隔线 */
        .divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
        }
        
        .divider-line {
            flex-grow: 1;
            height: 1px;
            background-color: #eeeeee;
        }
        
        .divider-icon {
            padding: 0 16px;
            color: #3490dc;
        }
        
        /* 标题样式 */
        .article-content h2 {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 32px 0 16px;
            color: #3490dc;
            border-left: 4px solid #3490dc;
            padding-left: 12px;
        }
        
        /* 图片与说明 */
        .image-container {
            margin: 32px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .image-container:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .image-container img {
            width: 100%;
            height: auto;
        }
        
        .image-caption {
            font-size: 0.875rem;
            color: #8c8c8c;
            text-align: center;
            background-color: #f7f7f7;
            padding: 12px;
        }
        
        /* 引用样式 */
        .quote-block {
            background-color: #f7f7f7;
            padding: 12px 16px;
            margin: 24px 0;
            border-left: 4px solid #ff7e36;
            border-radius: 0 8px 8px 0;
            font-style: italic;
            position: relative;
        }
        
        .quote-block i {
            position: absolute;
            top: -8px;
            left: -4px;
            font-size: 3rem;
            color: rgba(255, 126, 54, 0.3);
        }
        
        .quote-block p {
            margin-left: 8px;
            margin-bottom: 0;
        }
        
        /* 多图布局 */
        .image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 32px 0;
        }
        
        .grid-image-container {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .grid-image-container:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform: translateY(-4px);
        }
        
        .grid-image-container img {
            width: 100%;
            height: auto;
        }
        
        /* 提示框 */
        .tip-box {
            background-color: #ebf8ff;
            color: #2b6cb0;
            padding: 16px;
            border-radius: 8px;
            margin: 24px 0;
            border: 1px solid #90cdf4;
        }
        
        .tip-box p {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0;
        }
        
        .tip-box i {
            margin-top: 4px;
            margin-right: 12px;
            color: #63b3ed;
        }
        
        .tip-box strong {
            font-weight: 600;
        }
        
        /* 列表样式 */
        .article-list {
            margin: 24px 0 24px 8px;
        }
        
        .list-title {
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .article-list ul {
            list-style: none;
        }
        
        .article-list li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .article-list i {
            color: #48bb78;
            margin-top: 4px;
            margin-right: 8px;
        }
        
        /* 总结部分 */
        .summary-box {
            background: linear-gradient(to right, #ebf4ff, #faf5ff);
            padding: 20px;
            border-radius: 8px;
            margin: 32px 0;
            border: 1px solid #e0e7ff;
        }
        
        .summary-title {
            font-weight: 700;
            font-size: 1.125rem;
            margin-bottom: 8px;
            color: #4c1d95;
            display: flex;
            align-items: center;
        }
        
        .summary-title i {
            color: #fbbf24;
            margin-right: 8px;
        }
        
        /* 滚动动画相关 */
        .fade-in-element {
            opacity: 0;
            transform: translateY(16px);
            transition: all 0.7s ease;
        }
        
        .fade-in-element.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- 文章内容区 -->
    <div class="article-container">
        <!-- 导读部分 -->
        <div class="introduction highlight-block fade-in-element">
            <p class="ds-markdown-paragraph">
                <span>你有没有过这样的朋友？</span>
            </p>
            <p class="ds-markdown-paragraph">
                <span>她的消息提示音一响，你的心就跟着一沉。点开对话框，扑面而来的永远是生活的糟心事、工作的不如意、对所有人的抱怨……你努力共情，耐心开导，可每次聊完，都像被打捞上岸的鱼，身心俱疲，自己的好心情也被消耗殆尽。</span>
            </p>
            <p class="ds-markdown-paragraph">
                <span>如果你也正在经历这种“友情PUA”，那么，我接下来要说的“人际断舍离”，或许正是你需要的自救指南。</span>
            </p>
        </div>

        <!-- 文章封面图 -->
        <div class="article-cover fade-in-element">
            <img src="https://picsum.photos/id/24/1200/800" alt="文章封面图：精美的排版设计">
        </div>

        <!-- 文章正文 -->
        <div class="article-content" id="article-content">
            <p class="first-letter-drop fade-in-element">
                公众号文章的排版设计直接影响读者的阅读体验和文章的传播效果。一个好的排版能够让读者更容易获取信息，同时也能体现公众号的专业度和审美水平。
            </p>
            
            <p class="fade-in-element">
                本文将分享几个提升公众号文章排版的关键技巧，帮助你打造出既美观又易读的内容，吸引更多读者关注和分享。
            </p>
            
            <!-- 分隔线 -->
            <div class="divider fade-in-element">
                <div class="divider-line"></div>
                <div class="divider-icon">
                    <i class="fa fa-pencil"></i>
                </div>
                <div class="divider-line"></div>
            </div>
            
            <h2 class="fade-in-element">一、字体与字号的选择</h2>
            
            <p class="fade-in-element">
                公众号文章的默认字体已经过优化，但合理的字号选择仍然至关重要。对于正文内容，建议使用16-18px的字号，既保证可读性，又不会显得过大。
            </p>
            
            <!-- 图片与说明 -->
            <div class="image-container fade-in-element">
                <img src="https://picsum.photos/id/42/800/500" alt="字体大小对比示例">
                <p class="image-caption">不同字体大小的视觉效果对比</p>
            </div>
            
            <h2 class="fade-in-element">二、段落与间距设置</h2>
            
            <p class="fade-in-element">
                适当的段落间距能够让文章结构更清晰，减轻读者的视觉疲劳。建议段落之间保持1.5-2倍的行距，段落内部保持1.2-1.5倍的行距。
            </p>
            
            <!-- 引用样式 -->
            <div class="quote-block fade-in-element">
                <i class="fa fa-quote-left"></i>
                <p>"好的排版应该是隐形的，读者只会注意到内容本身，而不会被排版分散注意力。"</p>
            </div>
            
            <h2 class="fade-in-element">三、图文结合的重要性</h2>
            
            <p class="fade-in-element">
                纯文字的文章容易让读者感到枯燥，适当插入图片不仅能丰富内容，还能让文章更具吸引力。图片应该与内容相关，并且保持清晰的质量。
            </p>
            
            <!-- 多图布局 -->
            <div class="image-grid fade-in-element">
                <div class="grid-image-container">
                    <img src="https://picsum.photos/id/26/600/400" alt="排版示例图1">
                </div>
                <div class="grid-image-container">
                    <img src="https://picsum.photos/id/96/600/400" alt="排版示例图2">
                </div>
            </div>
            
            <h2 class="fade-in-element">四、重点内容的突出</h2>
            
            <p class="fade-in-element">
                对于需要强调的内容，可以使用加粗、变色或引用框等方式突出显示。但要注意不要过度使用，否则会让文章显得杂乱无章。
            </p>
            
            <div class="tip-box fade-in-element">
                <p>
                    <i class="fa fa-lightbulb-o"></i>
                    <span><strong>小贴士：</strong> 使用统一的配色方案和排版风格，能够增强公众号的品牌识别度，让读者更容易记住你。</span>
                </p>
            </div>
            
            <!-- 列表样式 -->
            <div class="article-list fade-in-element">
                <p class="list-title">有效的排版原则：</p>
                <ul>
                    <li>
                        <i class="fa fa-check-circle"></i>
                        <span>一致性：保持字体、颜色和间距的统一</span>
                    </li>
                    <li>
                        <i class="fa fa-check-circle"></i>
                        <span>留白：适当的空白能让内容呼吸</span>
                    </li>
                    <li>
                        <i class="fa fa-check-circle"></i>
                        <span>层次：通过大小和颜色建立内容优先级</span>
                    </li>
                    <li>
                        <i class="fa fa-check-circle"></i>
                        <span>对齐：保持元素的整齐排列</span>
                    </li>
                </ul>
            </div>
            
            <h2 class="fade-in-element">五、移动端适配</h2>
            
            <p class="fade-in-element">
                大多数读者会通过手机阅读公众号文章，因此必须确保排版在移动设备上有良好的显示效果。避免使用固定宽度，多采用相对单位和响应式设计。
            </p>
            
            <!-- 总结部分 -->
            <div class="summary-box fade-in-element">
                <h3 class="summary-title">
                    <i class="fa fa-star"></i>总结
                </h3>
                <p>好的公众号排版需要兼顾美观与实用，通过合理的字体选择、间距设置、图文搭配和重点突出，能够显著提升文章的阅读体验和传播效果。</p>
            </div>
            
            <!-- 互动话题部分 -->
            <div class="interaction-topic highlight-block fade-in-element">
                <p class="ds-markdown-paragraph">
                    <strong><span>【互动话题】</span></strong><span></span><br>
                    <span>你有过被“负能量朋友”消耗的经历吗？</span><br>
                    <span>在评论区分享你的故事，或者你是如何成功“断舍离”的？💬</span>
                </p>
            </div>
        </div>
    </div>

    <script>
        // 滚动动画 - 元素进入视口时淡入
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        // 对需要动画的元素应用观察器
        document.querySelectorAll('.fade-in-element').forEach(el => {
            observer.observe(el);
        });
    </script>
</body>
</html>